<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Multiple-column Layout: Task 3</title>
    <link rel="stylesheet" href="../styles.css" />
    <style>
      body {
        background-color: #fff;
        color: #333;
        font:
          1.2em / 1.5 Helvetica Neue,
          Helvetica,
          Arial,
          sans-serif;
        padding: 1em;
        margin: 0;
      }
      * {
        box-sizing: border-box;
      }

      .container {
        column-count: 3;
      }

      .box {
        text-align: center;
        margin: 1em 0;
      }

      .box h2 {
        margin: 0;
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        column-gap: 0.5em;
        align-items: center;
      }

      .box h2::before {
        content: "";
        border-bottom: 5px dotted #ccc;
      }

      .box h2::after {
        content: "";
        border-bottom: 5px dotted #ccc;
      }

      .subhead {
        font-style: italic;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <p>
        Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh
        onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.
      </p>

      <p>
        Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot
        courgette tatsoi pea sprouts fava bean collard greens dandelion okra
        wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.
      </p>
      <div class="box">
        <h2>I am a level 2 heading</h2>
        <div class="subhead">Lotus root water spinach fennel</div>
      </div>
      <p>
        Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce
        kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus
        winter purslane kale. Celery potato scallion desert raisin horseradish
        spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo
        shoot green bean swiss chard seakale pumpkin onion chickpea gram corn
        pea.
      </p>
    </div>
  </body>
</html>
